<template>
  <div>
    <!-- 调拨单审核 -->
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="visible"
      width="1024px"
      @close="reset"
    >
      <el-form ref="dataForm" class="form" :rules="rules" :model="temp" label-width="100px" label-position="right">
        <!-- <el-form-item label="调拨单号:">
          <el-input v-model="temp.stockTransCode" disabled />
        </el-form-item> -->
        <el-form-item label="调拨类型:">
          <el-input v-model="transType" disabled />
        </el-form-item>
        <el-form-item label="出库仓库:">
          <el-input v-model="temp.outStoreName" disabled />
        </el-form-item>
        <el-form-item label="入库仓库:">
          <el-input v-model="temp.inStoreName" disabled />
        </el-form-item>
        <el-form-item label="创建时间:">
          <el-input v-model="createTime" disabled />
        </el-form-item>
        <el-form-item label="创建人:">
          <el-input v-model="temp.applicant" disabled />
        </el-form-item>
        <el-form-item label="状态:">
          <el-input v-model="transStatus" disabled />
        </el-form-item>
        <el-form-item label="调拨车辆" prop="carNumber">
          <el-select v-model="temp.carNumber" filterable placeholder="请选择" clearable @change="truckChange">
            <el-option
              v-for="item in truckMap"
              :key="item.truckId"
              :label="item.truckCode"
              :value="item.truckId"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="司机" prop="driverId">
          <el-select v-model="temp.driverId" filterable placeholder="请选择" clearable @change="driverChange">
            <el-option
              v-for="item in driverMap"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="押运员:" prop="escortId">
          <el-select v-model="temp.escortId" filterable placeholder="请选择" clearable @change="escortChange">
            <el-option
              v-for="item in escortMap"
              :key="item.userId"
              :label="item.userName"
              :value="item.userId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="备注:" style="width: 100%;">
          <el-input v-model="temp.remark" disabled />
        </el-form-item>
        <el-form-item label="调拨扫瓶:">
          <el-input v-model="isSweep" disabled />
        </el-form-item>
        <el-form-item label="结算金额:">
          <el-input v-model="temp.settlementAmount" disabled />
        </el-form-item>
        <el-form-item label-width="0" style="width: 100%;">
          <lb-table
            ref="lbTable"
            border
            highlight-current-row
            element-loading-text="加载中"
            :column="tableData.column"
            :data="tableData.data"
            :pagination="false"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="curType==='audit'" type="primary" :loading="$loadingPlugin.submit" @click="pass(2)">通过</el-button>
        <el-button v-if="curType==='audit'" type="danger" @click="rejectWin">驳回</el-button>
        <el-button @click="reset">关闭</el-button>
      </div>
    </el-dialog>
    <cancellation-cause ref="cancellationCause" @upDataCause="upDataCause" />
  </div>
</template>

<script>
  import { stockTransDetail, stockTransAudit, stockTransstockTransbill } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  import CancellationCause from './CancellationCause.vue'

  export default {
    name: 'edit-info',
    components: {
      CancellationCause
    },
    props: {
      truckMap: {
        type: Array,
        required: true
      },
      driverMap: {
        type: Array,
        required: true
      },
      escortMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        billstockInfo: {},
        title: '',
        curType: 'audit',
        visible: false,
        temp: {},
        rules: {
          carNumber: [{ required: true, message: '请选择调拨车辆', trigger: 'change' }],
          driverId: [{ required: true, message: '请选择司机', trigger: 'change' }]
        },
        tableData: {
          column: [
            {
              type: 'index'
            },
            {
              prop: 'gtName',
              label: '商品类型'
            },
            {
              prop: 'goodsName',
              label: '商品名称'
            },
            {
              prop: 'goodsSpec',
              label: '规格型号'
            },
            {
              prop: 'gdStatus',
              label: '状态',
              render: (h, { row, $index }) => {
                const obj = {
                  1: '重',
                  2: '轻',
                  3: '回收',
                  4: '故障',
                  5: '已损坏',
                  6: '正常',
                  7: '报废',
                  8: '过期',
                  9: '问题重瓶'
                }
                return (
                  <span>{obj[row.gdStatus]}</span>
                )
              }
            },
            {
              prop: 'gdCount',
              align: 'right',
              label: '数量'
            }
            // {
            //   prop: 'netWeight',
            //   align: 'right',
            //   label: '重量'
            // },
            // {
            //   prop: 'remark',
            //   label: '备注'
            // },
            // {
            //   prop: 'goodsSN',
            //   label: '气瓶编码'
            // },
            // {
            //   prop: 'goodsSN1',
            //   label: '芯片编码'
            // }
          ],
          data: []
        }
      }
    },
    computed: {
      // 创建时间
      createTime: function() {
        return this.temp.createTime && parseTime(this.temp.createTime, '{y}-{m}-{d} {h}:{i}:{s}')
      },
      // 调拨类型
      transType: function() {
        const obj = {
          2: '内部充装调拨',
          3: '内部调拨'
        }
        return obj[this.temp.transType]
      },
      // 状态
      transStatus: function() {
        const obj = [
          { value: -1, desc: '已作废', key: 'INVALID' },
          { value: 1, desc: '待审核', key: 'UNREVIEWED' },
          { value: 2, desc: '已审核', key: 'VALID' },
          { value: 4, desc: '驳回', key: 'REJECT' },
          { value: 5, desc: '已出库', key: 'OUT' },
          { value: 6, desc: '已入库', key: 'IN' }
        ]

        return formatColumnMap(obj, 'value', this.temp.transStatus, 'desc')
      },
      //
      isSweep: function() {
        const obj = {
          1: '否',
          2: '是'
        }
        return obj[this.temp.isSweep]
      }
    },
    created() {},
    methods: {
      async open(temp, type) {
        console.log(temp)
        this.title = type === 'audit' ? `调拨单审核: ${temp.stockTransCode}` : `调拨单明细: ${temp.stockTransCode}`
        this.curType = type
        this.temp = temp
        this.getTransferInfo(temp.stockTransCode)
        this.getBillInfo(temp.stockTransCode)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
        })
      },
      // 列表
      async getTransferInfo(stockTransCode) {
        const res = await stockTransDetail({
          stockTransCode
        })
        this.tableData.data = res.data.rows
      },
      async getBillInfo(stockTransCode) {
        const res = await stockTransstockTransbill({
          stockTransCode: stockTransCode
        })
        if (res) {
          this.billstockInfo = res.data && res.data.billInfo
        }
      },
      // 车辆参数处理
      truckChange(val) {
        const arr = this.truckMap.find((l) => l.truckId === val)
        this.$set(this.temp, 'carNumber', arr.truckCode)
      },
      // 处理司机
      driverChange(val) {
        if (val) {
          const arr = this.driverMap.find((l) => l.userId === val)
          this.$set(this.temp, 'driver', arr.userName)
          this.$set(this.temp, 'driverId', arr.userId)
        } else {
          this.$set(this.temp, 'driver', '')
          this.$set(this.temp, 'driverId', '')
        }
      },
      // 押运员
      escortChange(val) {
        if (!val) {
          return
        }
        const arr = this.escortMap.find((l) => l.userId === val)
        this.$set(this.temp, 'escort', arr.userName)
        this.$set(this.temp, 'escortId', arr.userId)
      },
      // // 处理司机
      // driverChange(val) {
      //   if (!val) {
      //     return
      //   }
      //   const arr = this.driverrMap.find((l) => l.userId === val)
      //   this.$set(this.temp, 'driver', arr.userName)
      //   this.$set(this.temp, 'driverId', arr.userId)
      // },
      // // 车辆参数处理
      // truckChange(val) {
      //   if (!val) {
      //     return
      //   }
      //   const arr = this.truckMap.find((l) => l.truckId === val)
      //   this.$set(this.temp, 'carId', arr.truckId)
      //   this.$set(this.temp, 'carNumber', arr.truckCode)
      // },
      // 通过
      async pass(transStatus) {
        this.$refs.dataForm.validate(valid => {
          if (!valid) return
          this.submit({
            ...this.temp,
            transStatus: transStatus,
            stockTransCodes: this.temp.stockTransCode
          })
        })
      },
      async submit(params) {
        console.log('params', params)
        delete params.stockTransCode
        const res = await stockTransAudit(params)
        if (res.status === 200) {
          this.$notify({
            title: '提示',
            message: '操作成功',
            type: 'success',
            duration: 2000
          })
          this.visible = false
          this.resolve(true)
          // this.$emit('upDataTable')
        } else {
          this.$message.warning(res.data.message)
          this.resolve(false)
        }
      },
      // 更新数据
      upDataCause() {
        this.$emit('upDdataTable')
        this.visible = false
      },
      // 驳回
      rejectWin() {
        const row = {
          ...this.temp,
          stockTransCodes: this.temp.stockTransCode
        }
        delete row.stockTransCode
        this.$refs.cancellationCause.open(row)
      },
      // 关闭
      reset() {
        this.temp = {

        }
        this.visible = false
        this.$nextTick(() => {
          this.$refs.dataForm.clearValidate()
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /deep/.el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 184px;
  }
}
</style>
